<template>
  <div style="display: flex;flex-direction: column;height:100%;width:100%;color: white">
    <div class="title">
      <el-image :src="require('@/assets/images/dataScreen/operationTitle.png')" style="width: 7px;height: 14px;margin-right: 10px"></el-image>
      <div>专题</div>
    </div>
    <div class="main">
      <div class="content" v-for="item in topicList" @click="handelTopic(item)" >
        <el-image :src="item.url" style="width: 32px;height: 13px;margin-bottom:10px"></el-image>
        <div>{{item.name}}</div>
      </div>
    </div>
  </div>

</template>

<script>
import waterSupplyGague from "@/views/dataScreen/watersupply/waterSupplyGague.vue";

export default {
  name: "specialTopic",
  components: {waterSupplyGague},
  data(){
    return{
      topicList:[{
        name:'4690500热线',
        url:require('@/assets/images/dataScreen/ztrx.png')
      },{
        name:'用水方便程度',
        // url:require('@/assets/images/dataScreen/ysfbcd.png')
      },{
        name:'供水保证率',
        url:require('@/assets/images/dataScreen/gsbzl.png')
      },{
        name:'工程建设',
        url:require('@/assets/images/dataScreen/gcjs.png')
      },{
        name:'管网养护',
        url:require('@/assets/images/dataScreen/gwyh.png')
      },{
        name:'漏损分析',
        url:require('@/assets/images/dataScreen/lsfx.png')
      },{
        name:'区域用水分析',
        url:require('@/assets/images/dataScreen/qyysfx.png')
      },{
        name:'二次供水',
        url:require('@/assets/images/dataScreen/ecgs.png')
      },{
        name:'',
        url:require('@/assets/images/dataScreen/more.png')
      }]
    }
  },
  methods:{
    handelTopic(item){
        this.$emit('topic-dialog-open',item.name)
    }
  },
}
</script>

<style lang="scss" scoped >
.title{
  display: flex;
  height: 10%;
  flex-basis: 10%;
  color:white;
  font-size: 18px;
  font-weight: 700;
  align-items: center;
  //justify-content: center;
}
.main{
  display: flex;
  height: 90%;
  flex-basis: 90%;
  width:90%;
  color:white;
  font-size: 14px;
  align-items: center;
  flex-wrap:wrap;
  justify-content: space-between;
  .content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 31%;
    height: 31%;
    background: rgba(0,0,0,0.4);
    border: 1px solid #06B8FF;
    border-radius: 10px;
  }
  .content:hover{
    cursor: pointer;
  }
}
</style>
